{%extends "base.html"%}
{%block title%}
团队编辑
{%endblock%}
{%block body%}
<script>
    let team;
    $(document).ready(() => {
        team = new Vue({
            delimiters: ['{[', ']}'],
            el: "#team",
            mixins: [baseMixin],
            data: {
                data: null,
                done: false,
                errorMessage: "", successMessage: ""
            }, methods: {
                submit() {
                    $("html,body").animate({
                        scrollTop: 0
                    });
                    this.errorMessage = this.successMessage = "";
                    $.post("/api/team/update", { team_id: this.data.id, data: JSON.stringify(this.data) }).done(ctx => {
                        ctx = JSON.parse(ctx);
                        if (ctx.code) {
                            this.errorMessage = ctx.message;
                            return;
                        }
                        this.successMessage = ctx.message;
                    })
                }
            }
        });
        $.post("/api/team/raw_data", { team_id: window.location.href.split("/").pop() }).done(ctx => {
            ctx = JSON.parse(ctx);
            if (ctx.code) {
                showErrorModal(ctx.message);
                return;
            }
            team.data = ctx.data;
            team.done = true;
        });
    });
</script>

<div id="team" v-if="done">
    <div class="ui header">
        <h1>{[data.name]} - 信息编辑</h1>
    </div>
    <div class="ui stack segment">
        <div class="ui form" v-bind:class="{success:successMessage!='',error:errorMessage!=''}">
            <div class="ui success message">
                <div class="header">完成</div>
                {[successMessage]}
            </div>
            <div class="ui error message">
                <div class="header">错误</div>
                {[errorMessage]}
            </div>
            <div class="ui field">
                <label>团队名</label>
                <input type="text" v-model="data.name">
            </div>
            <div class="ui field">
                <label>团队简介</label>
                <textarea v-model="data.description"></textarea>
            </div>
            <div class="ui divider"></div>
            <div v-for="task,ix in data.tasks">
                <div class="ui header">
                    <h3>{[task.name]}</h3>
                </div>

                <div class="ui field">
                    <label>任务名</label>
                    <input type="text" v-model="task.name">
                </div>
                <div class="ui field">
                    <label>题目列表 </label>
                    <div class="ui label" v-for="problem,i in task.problems">
                        {[problem]}
                        <i class="delete icon" v-on:click="task.problems.splice(i,1)"></i>
                    </div>
                </div>
                <div class="ui field">
                    <label>添加题目</label>
                    <input type="text" v-on:keyup.enter="task.problems.push(parseInt($event.srcElement.value))">
                </div>
                <div class="ui tiny red button" v-on:click="data.tasks.splice(ix,1)">删除此任务</div>

                <div class="ui divider"></div>
            </div>
            <div class="ui green submit button" v-on:click="submit">提交</div>
            <div class="ui blue button" v-on:click="data.tasks.push({name:'新任务',problems:[]})">添加任务</div>
            <a :href="'/team/'+data.id" class="ui yellow button">返回</a>
        </div>
    </div>
</div>
{%endblock%}